<template lang="pug">
.cp-plan-push
  el-dialog(:title="title", :visible="visible", width="80%", @close="close", :close-on-click-modal="false")
    el-form.ph-search(:inline="true")
      //- el-form-item(label="供应商 : ")
      //-   el-select(v-model="pushPlanSupply", placeholder="请选择", style="width: 120px")
      //-     el-option(
      //-       v-for="item in supplySelect",
      //-       :key="item.value",
      //-       :label="item.name",
      //-       :value="item.value")
      el-form-item(label="申请人 : ")
        el-select(v-model="pushPlanCreator", placeholder="请选择", style="width: 120px")
          el-option(v-for="item in empSelect", :key="item.value", :label="item.name", :value="item.value")
      el-form-item(label="需求部门 : ")
        el-select(v-model="pushPlanDepart", placeholder="请选择", style="width: 120px")
          el-option(v-for="item in oneDeptSelect", :key="item.value", :label="item.name", :value="item.value")
      el-form-item(style="margin-left: 8px")
        el-button(type="primary", @click="searchPushPlans") 搜索
        el-button(type="primary", @click="resetPushSearch") 重置
    .ph-table
      el-table(
        :data="pushplans",
        highlight-current-row
        height="100%"
        size="mini"
        @selection-change="selectPushPlan")
        el-table-column(type="selection", width="42")
        el-table-column(align="center", show-overflow-tooltip, type="index", label="序号", :fixed="true")
        el-table-column(align="center", show-overflow-tooltip, prop="order", label="申请单号")
        el-table-column(align="center", show-overflow-tooltip, prop="status", label="状态")
          template(slot-scope="scope")
            span {{ scope.row.status | compare-list(statusSelect) }}
        //- el-table-column(align="center", show-overflow-tooltip, prop="supply", label="供应商")
        //-   template(slot-scope="scope")
        //-     span {{ scope.row.supply | compare-list(supplySelect) }}
        el-table-column(align="center", show-overflow-tooltip, prop="creator", label="申请人")
          template(slot-scope="scope")
            span {{ scope.row.creator | compare-list(empSelect) }}
        el-table-column(align="center", show-overflow-tooltip, prop="depart", label="需求部门")
          template(slot-scope="scope")
            span {{ scope.row.depart | compare-list(oneDeptSelect) }}
        el-table-column(align="center", show-overflow-tooltip, prop="createTime", label="创建时间")
          template(slot-scope="scope")
            span {{ scope.row.createTime | date-format }}
        el-table-column(align="center", show-overflow-tooltip, prop="approveTime", label="审批时间")
          template(slot-scope="scope")
            span {{ scope.row.approveTime | date-format }}
        el-table-column(align="center", show-overflow-tooltip, prop="comment", label="备注")
        el-table-column(align="center", label="操作", min-width="48px")
          template(slot-scope="scope")
            el-tooltip(content="查看")
              i.icon-act.el-icon-view(@click="viewPlan(scope.row)")
    .ph-btns
      el-button.dia-btn(type="primary", plain, @click="close") 取消
      el-button.dia-btn.dia-after(type="primary", @click="pushPlans") 下推
  PlanView(:visible="showPlanView", :formData="formData", @close="showPlanView=false")
</template>

<script>
import { mapGetters } from 'vuex';
import ComApi from '@/api/common';
import PurApi from '@/api/purchase';
import PlanView from '@/components/purchase/plan/PlanView';

export default {
  name: 'planview',
  props: {
    title: {
      type: String,
      default: '下推采购订单'
    },
    visible: Boolean
  },
  components: {
    PlanView
  },
  data() {
    return {
      // pushPlanSupply: null,
      pushPlanCreator: null,
      pushPlanDepart: null,
      pushplans: [],
      multSelectPushPlan: [],
      showPlanView: false,
      formData: {}
    };
  },
  methods: {
    close () {
      this.$emit('close');
    },
    resetPushSearch () {
      // this.pushPlanSupply = null;
      this.pushPlanCreator = null;
      this.pushPlanDepart = null;
      this.$message.success('重置成功');
    },
    makePushSearch () {
      const params = {};
      if (this.pushPlanCreator) {
        params.creator = this.pushPlanCreator;
      }
      // if (this.pushPlanSupply) {
      //   params.supply = this.pushPlanSupply;
      // }
      if (this.pushPlanDepart) {
        params.depart = this.pushPlanDepart;
      }

      return params;
    },
    searchPushPlans () {
      const params = this.makePushSearch();
      PurApi.getPushPlans(params).then((result) => {
        if (!result.status) {
          this.pushplans = result.obj.records;
        } else {
          this.$message.info('暂时没有符合数据');
          this.pushplans = [];
        }
      }).catch((error) => {
        console.log(error);
        this.$message.error('网络不给力，请稍后再试');
      });
    },
    selectPushPlan (multSelect) {
      this.multSelectPushPlan = multSelect;
      console.log(multSelect);
    },
    pushPlans () {
      if (this.multSelectPushPlan.length) {
        const orders = this.multSelectPushPlan.map(plan => plan.order);
        PurApi.pushPlan({ orders }).then((result) => {
          if (!result.status) {
            this.$message.success('下推成功');
            this.close();
          } else {
            this.$message.error(result.comment);
          }
        }).catch((error) => {
          console.log(error);
        });
      } else {
        this.$message.error('还未选择采购申请单');
      }
    },
    viewPlan (row) {
      PurApi.getPlanDetail({ id: row.order }).then((result) => {
        if (!result.status) {
          this.formData = result.obj;
          this.showPlanView = true;
        } else {
          this.$message.error(result.comment);
        }
      }).catch((error) => {
        console.log(JSON.stringify(error));
      });
    },
  },
  computed: {
    ...mapGetters(['empSelect', 'oneDeptSelect', 'supplySelect'])
  },
  mounted () {
    // 状态列表
    ComApi.getStatus({ orderType: 'procurementplan' }).then((statusList) => {
      this.statusSelect = statusList;
    });
  }
};
</script>

<style lang="sass">
.cp-plan-push
  .ph-search
    height: 44px
    overflow-x: auto
    overflow-y: hidden
    padding: 0 0 12px 16px
    .el-form-item
      margin-right: 14px
    .el-form-item__label
      padding-right: 6px
  .ph-table
    margin-bottom: 16px
    width: 100%
    table
      width: 100%!important
      &::before
        display: none
      .icon-act
        font-size: 16px
        margin-left: 3px
        margin-right: 3px
    .el-table__empty-block
      display: none
  .ph-btns
    margin-top: 24px
    text-align: center
    .dia-btn
      width: 80px
    .dia-after
      margin-left: 40px
</style>
